<template>
  <el-drawer v-model="drawerVisible"
             direction="rtl"
             title="bpmn:TaskEvent"
             :size="500"
             header-class="shadow-l mb-0 pb-4"
             footer-class="shadow-l"
             class="border-b"
             @open="onDrawerOpen">
    <template #default>
      <el-form ref="form" :model="dataFrom" :rules="dataFromRules" label-width="80px" @submit.native.prevent>
        <el-form-item label="事件名称" prop="name">
          <el-input v-model="dataFrom.name" clearable placeholder="请输入"/>
        </el-form-item>
        <el-form-item label="审批类型" prop="name">
          <el-radio-group v-model="dataFrom.type">
            <el-radio value="manual">人工审批</el-radio>
            <el-radio value="autoAgress">自动通过</el-radio>
            <el-radio value="autoDeny">自动拒绝</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-tabs v-if="dataFrom.type==='manual'" model-value="设置审批人">
          <el-tab-pane label="设置审批人" name="设置审批人" class="space-y-2 flex flex-col">
            <div v-for="(e,index) in dataFrom.audits" :key="index" class="text-sm border ">
              <div class="bg-gray-200 flex px-2 py-2">
                <div class="flex-1 text-left">审批人</div>
                <div class="text-right flex items-center cursor-pointer">
                  <el-icon @click=" dataFrom.audits.splice(index, 1)">
                    <Delete/>
                  </el-icon>
                </div>
              </div>
              <div class="px-2 mt-2">
                <el-form-item label="审批人类型" prop="name" label-width="90px">
                  <el-select v-model="e.userType" clearable>
                    <el-option v-for="e in TYPE_OF_APPROVER" :key="e.value" :value="e.value" :label="e.label"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item v-if="e.userType==='candidateUsers'" label="候选人" prop="name" label-width="90px">
                  <el-select v-model="e.role3" clearable filterable multiple>
                    <el-option v-for="e in USERS_OF_APPROVER" :key="e.id" :value="e.id" :label="e.realName">
                      <span style="float: left">{{ e.realName }}</span>
                      <span style="float: right; color: var(--el-text-color-secondary); font-size: 13px; ">{{ e.deptName }}</span>
                    </el-option>
                  </el-select>
                </el-form-item>
                <el-form-item v-if="e.userType==='candidateGroupsRole'" label="候选角色" prop="name" label-width="90px">
                  <el-select v-model="e.role1" clearable filterable multiple>
                    <el-option v-for="e in ROLES_OF_APPROVER" :key="e.id" :value="e.id" :label="e.roleName"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item v-if="e.userType==='candidateGroupsDept'" label="候选部门" prop="name" label-width="90px">
                  <el-select v-model="e.role2" clearable filterable multiple>
                    <el-option v-for="e in DEPARTMENT_OF_APPROVER" :key="e.id" :value="e.id" :label="e.name"></el-option>
                  </el-select>
                </el-form-item>
              </div>
            </div>
            <div class="">
              <el-button type="primary" text :icon="Plus" class="pl-0" @click="dataFrom.audits.push({})">添加审批人</el-button>
            </div>
            <el-form-item label="审批人为空时：" prop="name" label-position="top" class="bold-label">
              <el-radio-group v-model="dataFrom.asdasdasd">
                <el-radio value="autoPass">自动通过</el-radio>
                <el-radio value="specified">指定人员审批</el-radio>
                <el-radio value="xxxxx" disabled>转交给审批管理员</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item v-if="dataFrom.asdasdasd==='specified'" label="候选人" prop="name" label-width="90px" label-position="top">
              <el-select v-model="dataFrom.specified123" clearable filterable multiple>
                <el-option v-for="e in USERS_OF_APPROVER" :key="e.id" :value="e.id" :label="e.realName">
                  <span style="float: left">{{ e.realName }}</span>
                  <span style="float: right; color: var(--el-text-color-secondary); font-size: 13px; ">{{ e.deptName }}</span>
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="审批人与提交人为同一人时：" prop="name" label-position="top" class="bold-label">
              <el-radio-group v-model="dataFrom.asdasdasdaaaa">
                <el-radio value="autoPass">由提交人对自己审批</el-radio>
                <el-radio value="specified">自动通过</el-radio>
                <el-radio value="xxxxx">转交给直属上级审批
                  <el-popover placement="top-start" width="240"
                              content="若直属上级为空，则自动通过。">
                    <template #reference>
                      <el-icon>
                        <QuestionFilled/>
                      </el-icon>
                    </template>
                  </el-popover>
                </el-radio>
                <el-radio value="xxxxx2">转交给部门负责人审批
                  <el-popover placement="top-start" width="240"
                              content="若部门负责人为空，则自动通过。">
                    <template #reference>
                      <el-icon>
                        <QuestionFilled/>
                      </el-icon>
                    </template>
                  </el-popover>
                </el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="提示：" label-position="top" class="bold-label">
              <span class="text-gray-500">若审批人离职，会自动转交给审批人的上级代为处理</span>
            </el-form-item>
            <el-divider class="my-2"/>

            <div v-for="(e,index) in dataFrom.cc" :key="index" class="text-sm border ">
              <div class="bg-gray-200 flex px-2 py-2">
                <div class="flex-1 text-left">抄送人</div>
                <div class="text-right flex items-center cursor-pointer">
                  <el-icon @click=" dataFrom.audits.splice(index, 1)">
                    <Delete/>
                  </el-icon>
                </div>
              </div>
              <div class="px-2 mt-2">
                <el-form-item label="抄送人类型" prop="name" label-width="90px">
                  <el-select v-model="e.userType" clearable>
                    <el-option v-for="e in TYPE_OF_APPROVER" :key="e.value" :value="e.value" :label="e.label"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item v-if="e.userType==='candidateUsers'" label="候选人" prop="name" label-width="90px">
                  <el-select v-model="e.role3" clearable filterable multiple>
                    <el-option v-for="e in USERS_OF_APPROVER" :key="e.id" :value="e.id" :label="e.realName">
                      <span style="float: left">{{ e.realName }}</span>
                      <span style="float: right; color: var(--el-text-color-secondary); font-size: 13px; ">{{ e.deptName }}</span>
                    </el-option>
                  </el-select>
                </el-form-item>
                <el-form-item v-if="e.userType==='candidateGroupsRole'" label="候选角色" prop="name" label-width="90px">
                  <el-select v-model="e.role1" clearable filterable multiple>
                    <el-option v-for="e in ROLES_OF_APPROVER" :key="e.id" :value="e.id" :label="e.roleName"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item v-if="e.userType==='candidateGroupsDept'" label="候选部门" prop="name" label-width="90px">
                  <el-select v-model="e.role2" clearable filterable multiple>
                    <el-option v-for="e in DEPARTMENT_OF_APPROVER" :key="e.id" :value="e.id" :label="e.name"></el-option>
                  </el-select>
                </el-form-item>
              </div>
            </div>
            <div class="">
              <el-button type="primary" text :icon="Plus" class="pl-0" @click="dataFrom.cc.push({})">添加抄送人</el-button>
            </div>
          </el-tab-pane>
          <el-tab-pane label="表单权限" name="表单权限">
            <el-table :data="dataFrom.fieldPermission" size="small" style="width: 100%;--el-table-header-bg-color: #fafafa">
              <el-table-column v-if="false" label="字段名" prop="model" show-overflow-tooltip/>
              <el-table-column label="数据表字段" prop="column_name" show-overflow-tooltip/>
              <el-table-column label="字段说明" prop="comment" show-overflow-tooltip/>
              <!--              <el-table-column label="子表字段说明" prop="childTableName" show-overflow-tooltip/>-->
              <!-- 可读列 -->
              <el-table-column prop="read" width="80">
                <template #header>
                  <el-checkbox>可读</el-checkbox>
                </template>
                <template #default="{ row }">
                  <el-checkbox v-model="row.read" @change="handleCheckboxChange(row, 'read')"></el-checkbox>
                </template>
              </el-table-column>
              <!-- 编辑列 -->
              <el-table-column prop="edit" width="80">
                <template #header>
                  <el-checkbox>编辑</el-checkbox>
                </template>
                <template #default="{ row }">
                  <el-checkbox v-model="row.edit" @change="handleCheckboxChange(row, 'edit')"></el-checkbox>
                </template>
              </el-table-column>
              <el-table-column width="55" align="center" label="增强">
                <template #default="scope">
                  <!--                  <el-checkbox v-model="scope.row.visible" class="margin-right-sm">可读</el-checkbox>-->
                  <!--                  <el-checkbox v-model="scope.row.disabled">编辑</el-checkbox>-->
                  <!--                  <el-checkbox v-model="scope.row.hasEnhance"><span/></el-checkbox>-->
                  <el-button type="primary" text @click="onEnhance(scope.row, scope.$index)">增强</el-button>
                </template>
              </el-table-column>
            </el-table>
          </el-tab-pane>
          <el-tab-pane label="操作权限" name="操作权限">
            <el-form-item label="" label-width="0" class="mb-0">
              <el-checkbox v-model="dataFrom.allowReturn" label="允许退回"/>
            </el-form-item>
            <el-form-item label="" label-width="0">
              <el-radio-group v-if="dataFrom.allowReturn" v-model="dataFrom.returnValue">
                <el-radio value="anyEvent">任意节点</el-radio>
                <el-radio value="autoDeny">指定节点</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="审批意见" prop="name" label-position="top" class="bold-label">
              <el-checkbox v-model="dataFrom.opinions" label="提交审批需填写审批意见"/>
            </el-form-item>
            <el-form-item label="可操作项" prop="name" label-position="top" class="mb-2 bold-label">
              <el-checkbox v-model="dataFrom.agree">
                <template #default="scope">同意
                  <el-input v-model="dataFrom.name123" class="ml-1 w-32" clearable placeholder="可输入别名"/>
                </template>
              </el-checkbox>
            </el-form-item>
            <el-form-item class="mb-0" label-width="0">
              <el-checkbox v-model="dataFrom.disagree">
                <template #default="scope">拒绝
                  <el-input v-model="dataFrom.name123" class="ml-1 w-32" clearable placeholder="可输入别名"/>
                </template>
              </el-checkbox>
            </el-form-item>
            <el-form-item class="mb-0" label-width="0">
              <el-checkbox v-model="dataFrom.disagree">
                <template #default="scope">拒绝
                  <el-input v-model="dataFrom.name123" class="ml-1 w-32" clearable placeholder="可输入别名"/>
                </template>
              </el-checkbox>
            </el-form-item>
          </el-tab-pane>
        </el-tabs>
      </el-form>
    </template>
    <template #footer>
      <div style="flex: auto">
        <el-button @click="eventData=null;drawerVisible=false">关闭</el-button>
        <el-button type="primary" @click="onSave">保存</el-button>
      </div>
    </template>
  </el-drawer>
</template>

<script setup>
/////////////////////////////////   外部依赖导入    //////////////////////////
import {onMounted, onUnmounted, ref, reactive, defineProps, defineEmits, computed, nextTick} from 'vue'
import {$localStorage} from "@/utils/application-storage.js";
import $apiService from "@/axios/api.js";
import {Delete, Plus, QuestionFilled} from "@element-plus/icons-vue";
import Epms2AceEditor from "@/components/epms2-ace-editor.vue";
import {TYPE_OF_APPROVER} from "@/utils/constant.js";

/////////////////////////////////   组件参数    //////////////////////////

/////////////////////////////////   私有变量定义    //////////////////////////
const tenantInfo = ref({
  id: "",
  tenantCode: '',
  systemName: ''
})

const basicInfoFormRules = reactive({
  name: [{required: true, message: '请输入账户', trigger: 'blur'}],
  keyCode: [{required: true, message: '请输入', trigger: 'blur'}],
  customDefinitionCode: [{required: true, message: '请输入', trigger: 'blur'}],
  actualTableName: [{required: true, message: '请选择', trigger: 'blur'}],
})
const dataFromRules = reactive([])
const dataFromRef = ref([])
const dataFrom = ref({
  title: "",
  audits: [],
  cc: []
})
const drawerVisible = ref(false)
const eventData = ref({})
const applicationList = ref([])
const ROLES_OF_APPROVER = ref([])
const DEPARTMENT_OF_APPROVER = ref([])
const USERS_OF_APPROVER = ref([])

/////////////////////////////////   生命周期方法 //////////////////////////
onMounted(() => {
  // getWorkflowFormOptions()
  tenantInfo.value = $localStorage.getTenantInfo()
});
onUnmounted(() => {
});

/////////////////////////////////   页面方法    //////////////////////////
const show = async (bpmnElement, formData) => {
  drawerVisible.value = true
  if (formData) dataFrom.value = {...formData, audits: [{}], cc: [], fieldPermission: [{read: true, edit: true}]}
  await nextTick();
  if (!ROLES_OF_APPROVER.value.length) getRoleList()
  if (!DEPARTMENT_OF_APPROVER.value.length) getDeptList()
  if (!USERS_OF_APPROVER.value.length) getUserList()
}
// const getWorkflowFormOptions = () => {
//   const data = {
//     params: {
//       actualFormType: 'ProcessForm',
//       status: 'Enable',
//     },
//     all: true,
//   }
//   $apiService.getFormList(data).then((res) => {
//     workflowFormOptions.value = res.data.data.content.map((item) => {
//       const {formName, actualTableName} = item
//       return {label: formName, value: actualTableName}
//     })
//   })
// }
const submitDialogForm = () => {
}
const openFormDialog = (action, event, data) => {

}
const onDrawerOpen = () => {
  // if (scriptHelpDrawerContent.value) return
  // $apiService.queryDefaultJsFunctionsInstruction().then((res) => {
  //   scriptHelpDrawerContent.value = res.data.data
  // })
}
const getRoleList = () => {
  $apiService.getRoleList({params: {}, all: true,}).then((res) => {
    ROLES_OF_APPROVER.value = res.data.data.content
  })
}
const getDeptList = () => {
  const deptSearchForm = {
    params: {},
    page: 1,
    size: 999,
    sort: ['name,desc'],
  }
  $apiService.getDepartmentAsList(deptSearchForm).then((res) => {
    DEPARTMENT_OF_APPROVER.value = res.data.data.content
  })
}
const getUserList = () => {
  const data = {
    params: {
      status_ne: 'Disable',
      tenantId: tenantInfo.value.id,
    },
    sort: ['deptName,desc'],
    all: true,
  }
  $apiService.queryAllForBiz(data).then((res) => {
    USERS_OF_APPROVER.value = res.data.data.content
  })
}

const onSave = () => {
}
/////////////////////////////////   暴露内部方法，让父组件可以访问    //////////////////////////
defineExpose({
  show
});
</script>

<style scoped>
/*:deep(.el-drawer__footer) {*/
/*  border-top: 1px solid red;*/
/*}*/

:deep(.bold-label .el-form-item__label) {
  font-weight: bold;
  color: black;
  margin-bottom: 0;
}
</style>
